<template>
    <a-modal v-model:open="open" title="编辑业主信息" @ok="handleSubmit" @cancel="handleCancel" :width="600" okText="提交"
        cancelText="取消">
        <a-form :model="formState">
            <div class="form-section">
                <a-form-item label="业主姓名" name="ownerName">
                    <a-input v-model:value="formState.ownerName" style="width: 100%" />
                </a-form-item>
                <a-form-item label="业主性别">
                    <a-select v-model:value="formState.ownerSex" style="width: 100%" :options="sexOptions" />
                </a-form-item>
                <a-form-item label="身份证号" name="idCard">
                    <a-input v-model:value="formState.idCard" style="width: 100%" />
                </a-form-item>
                <a-form-item label="手机号码" name="phoneNum">
                    <a-input v-model:value="formState.phoneNum" style="width: 100%" />
                </a-form-item>
                <a-form-item label="家庭住址" name="nativePlace">
                    <a-textarea v-model:value="formState.nativePlace" />
                </a-form-item>
            </div>
        </a-form>
    </a-modal>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { message } from 'ant-design-vue'
import { updateHousehold } from '@/api/api'

const props = defineProps({
    formData: {
        type: Object, default: () => ({})// 接收父组件传入的表单数据
    },
    formOpen: {
        type: Boolean, default: false // 控制弹窗显示状态
    }
})

const emit = defineEmits(['onClose', 'onSuccess'])  // 定义可触发的事件
const open = ref(false)

// 表单状态
const formState = reactive({
    ownerName: '',
    ownerSex: '',
    idCard: '',
    phoneNum: '',
    nativePlace: '',
    id: ''
})


const sexOptions = [
    { value: '男', label: '男' },
    { value: '女', label: '女' }
]



// 监听表单数据变化
// val 就是父组件传来的数据
watch(() => props.formData, (val) => {
    // 当父组件传入新数据时，更新表单状态
    Object.assign(formState, {
        ownerName: val.owner_name,
        ownerSex: val.owner_sex,
        idCard: val.id_card,
        phoneNum: val.phone_num,
        nativePlace: val.native_place,
        id: val.id
    })
}, { immediate: true })  // 组件一创建就立即执行这个监听


// 监听弹窗状态
// 同步父组件的弹窗状态
watch(() => props.formOpen, val => open.value = val)

// 提交表单
const handleSubmit = async () => {
    try {
        // 构造提交数据
        const submitData = {
            owner_name: formState.ownerName,
            owner_sex: formState.ownerSex,
            id_card: formState.idCard,
            phone_num: formState.phoneNum,
            native_place: formState.nativePlace,
            id: formState.id
        }
        // 调用API更新住户信息
        const res = await updateHousehold(formState.id, submitData)
        if (res.code === 200) {
            message.success('提交成功')
            emit('onSuccess', submitData) // 通知父组件更新成功
            handleCancel() // 关闭弹窗
        }
    } catch (error) {
        message.error('提交失败：' + error.message)
    }
}

// 取消
const handleCancel = () => {
    open.value = false// 关闭弹窗
    emit('onClose') // 触发关闭事件
}
</script>

<style>
.form-section {
    padding: 0 20px;
    height: 100%;
}

.ant-form-item {
    margin-bottom: 24px;
}

.ant-form-item-label {
    width: 80px;
    text-align: right;
    padding-right: 8px;
}

.ant-input,
.ant-select {
    width: 100%;
}

.ant-textarea {
    width: 100%;
    min-height: 80px;
}
</style>